<template>
    <div>
        <div v-show="videoUpload === false">
            <div class="title">视频列表</div>
            <!-- 上部导航 -->
            <SelectBar :barData="['AR','MR','裸眼3D','全息投影']" @handleSelect="handleSelect"></SelectBar>



            <div style="background-color: #fff;width: 100%;">
                <div style="padding: 10px 10px 10px 10px; display: flex;">
                    <el-input v-model="input" placeholder="请输入视频编号/用户id" @click-suffix="search" suffix-icon="el-icon-search"
                        style="width: 300px;">
                    </el-input>
                    <div style="margin-left: 10px;">
                        <el-button icon="el-icon-upload" @click="uploadOpen">上传</el-button>
                    </div>
                    <div style="margin-left: auto;">
                        <el-button type="danger">批量删除</el-button>
                    </div>
                </div>

                <!-- 表格 -->
                <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
                    <el-table ref="multipleTable" border :data="resData" tooltip-effect="dark" style="width: 100%">

                        <el-table-column prop="id" label="视频编号" width="240">
                        </el-table-column>
                        <el-table-column prop="name" label="视频标题" width="320">
                        </el-table-column>
                        <el-table-column prop="author" label="作者" width="220">
                        </el-table-column>
                        <el-table-column prop="userId" label="用户id号" width="220">
                        </el-table-column>

                        <el-table-column label="操作" width="300">
                            <!-- <span class="handle">查看</span> -->
                            <span class="handle" @click="editVideo">编辑</span>
                            <span class="handle">删除</span>
                        </el-table-column>
                        <el-table-column label="多选" type="selection" width="55"> </el-table-column>


                    </el-table>
                    <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div v-show="videoUpload === true">
            <div class="title" v-show="videoEdit===false">视频上传</div>
            <div class="title" v-show="videoEdit === true">视频编辑</div>
            <div class="box">
                <div style="display: flex;">
                    <div class="upload">
                        <div class="upload-icon">
                            <i class="el-icon-document-add">
                                <div style="font-size: small;color: rgb(199, 199, 199);margin: 15px;">上传视频</div>
                            </i>
                        </div>
                    </div>
                    <div style="color:rgb(199, 199, 199);margin-top: auto;margin-bottom: 10px;font-size: small;">预览</div>
                </div>
                <div style="width: 1111px;border: solid #D8D8D8 1px;height: 0;margin: 20px auto;"></div>
                <el-row>
                    <div class="goods-box">上传路径 <el-input style="margin:0 20px;width: 750px;"></el-input>
                    </div>
                </el-row>
                <el-row>
                    <div class="goods-box">视频标题 <el-input placeholder="请输入标题" style="margin:0 20px;width: 750px;"></el-input>
                    </div>
                 </el-row>
                <el-row>
                    <el-col :span="12"><div class="goods-box">视频分类
                        <el-select placeholder="请选择分类" style="margin:0 20px;">
                            <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div></el-col>
                    <el-col :span="12"><span class="goods-box">视频大小
                        <el-input style="margin:0 20px;width: 350px;"></el-input>
                    </span></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><div class="goods-box">视频作者 <el-input placeholder="请输入作者" style="margin:0 20px;width: 350px;"></el-input>
                    </div></el-col>
                    <el-col :span="12"><span class="goods-box">用户id <el-input placeholder="请输入id" style="margin: 0 37px;width: 350px;"></el-input>
                    </span></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><div class="goods-box">上传格式
                        <el-select placeholder="请选择格式" style="margin:0 20px;">
                            <el-option v-for="item in formats" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div></el-col>
                    <el-col :span="12"><span class="goods-box">封面替换 <el-input style="margin:0 20px;width: 350px;"></el-input>
                    </span></el-col>
                </el-row>
                <div style="display: flex;margin: 30px 10px 20px 10px;">视频简介
                    <el-input type="textarea" style="margin:0 20px 0 20px; width: 400px;" :rows="4" >
                    </el-input>
                </div>
                <div style="text-align: end;">
                    <el-button type="primary">确认</el-button>
                    <el-button @click="videoUpload=false;videoEdit=false">取消</el-button>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import SelectBar from '@/components/SelectBar.vue'
export default {
    data() {
        return {
            selectIndex: 0,
            videoUpload: false,
            videoEdit:false,
            tableData: [
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`

                },
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`

                },
                {
                    id: 'AV20230413111', name: 'MR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'MR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`

                },
                {
                    id: 'AV20230413111', name: '裸眼3D体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: '裸眼3D',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`

                },
                {
                    id: 'AV20230413111', name: '全息投影体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: '全息投影',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`

                },
            ]
        }
    },
    methods: {
        search() { },
        uploadOpen() {
            this.videoUpload = true
        },
        editVideo(){
            this.videoUpload = true
            this.videoEdit=true
        },
        handleSelect(index){
            this.selectIndex=index
        }
    },
    computed: {
        resData() {
            if (this.selectIndex === 0) {
                return this.tableData.filter((cur) => {
                    return cur.category === 'AR'
                })
            }
            else if (this.selectIndex === 1) {
                return this.tableData.filter((cur) => {
                    return cur.category === 'MR'
                })
            }
            else if (this.selectIndex === 2) {
                return this.tableData.filter((cur) => {
                    return cur.category === '裸眼3D'
                })
            }
            else if (this.selectIndex === 3) {
                return this.tableData.filter((cur) => {
                    return cur.category === '全息投影'
                })
            }
            return this.tableData
        }
    },
    components:{
        SelectBar
    }
}
</script>

<style scoped>
.title {
    font-size: larger;
    margin: 10px 10px 30px 0;
    /* font-family: Microsoft YaHei; */
}

.bar-father {
    display: flex;
    /* margin-left: 10px; */
}

.selected-bar {
    background-color: #fff;
    /* margin: 10px 10px; */
    padding: 5px 0px;
    border-bottom: #9370db solid 2px;
}

.bar {
    /* margin: 20px 20px; */
    padding: 15px 35px;
}

.bar-padding {
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    padding: 10px 35px 15px 35px;
}

.handle {
    margin: 0 10px;
    color: #409EFF;
    /* 鼠标移上去有手形 */
    cursor: pointer
}

.box {
    width: 1200px;
    margin: 0px 10px 20px 10px;
    padding: 10px 10px 30px 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.upload {
    margin: 10px;
    background-color: rgb(244, 243, 243);
    height: 350px;
    width: 530px;
    position: relative;
}

.upload-icon {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 80px;
    color: rgb(199, 199, 199);

}

.goods-box {
    display: flex;
    margin: 10px 10px 20px 10px;
    align-items: center;
}
</style>